<template>
  <div class="app-container">
    <el-form ref="stock" :model="stock" label-width="120px" label-position="left" :rules="rules">

      <el-form-item label="仓库" prop="warehouseId">
        <el-select v-model="stock.warehouseId" placeholder="选择仓库" :disabled="seDisabled">
          <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :value="warehouse.id" :label="warehouse.name"/>
        </el-select>
      </el-form-item>

      <el-form-item label="商品" prop="goodsId">
        <el-select v-model="stock.goodsId" placeholder="选择商品">
          <el-option v-for="goods in goodsList" :key="goods.goodsId" :value="goods.goodsId" :label="goods.goodsName"/>
        </el-select>
      </el-form-item>

      <el-form-item label="数量" prop="num">
        <el-input type="" v-model="stock.num" style="width: 100px"></el-input>
      </el-form-item>


      <el-form-item label="供应商名" prop="supplier">
        <el-input v-model="stock.supplier" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="供应商联系方式" prop="tel">
        <el-input v-model="stock.tel" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="单价" prop="price">
        <el-input v-model="stock.price" style="width: 100px"></el-input>
      </el-form-item>

      <el-form-item label="总进价:">
        {{isNaN(this.stock.num * this.stock.price) ? 0 : this.stock.num * this.stock.price}}
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">进货</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import {isEmail, isMobile} from '@/utils/validate'

export default {
  name: "addStock",
  data(){
    // 验证规则
    var validateNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('输入数量'));
      } else if(isNaN(value)){
          callback(new Error('请输入数字'));
      }else if(!Number.isInteger(Number(value))){
        callback(new Error('请输入整数'));
      } else {
        callback();
      }
    };

    var validateSupplier = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入供应商'));
      } else {
        callback();
      }
    };

    var validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入请输入联系电话'));
      } else if(!isMobile(value)){
        callback(new Error('请输入正确电话格式'));
      }else {
        callback();
      }
    };

    var validatePrice = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入价格'));
      } else if(isNaN(value)){
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };

    return{
      stock:{
        warehouseId: '',
        goodsId: '',
        num: '',
        supplier: '',
        tel: '',
        price: '',
      },
      warehouseList: null,
      goodsList: null,
      seDisabled: false,
      rules: {
        num: [
          { validator: validateNum, trigger: 'blur' }
        ],
        supplier: [
          { validator: validateSupplier, trigger: 'blur' }
        ],
        tel: [
          { validator: validateTel, trigger: 'blur' }
        ],
        price: [
          { validator: validatePrice, trigger: 'blur' }
        ]
      },
    }
  },
  methods:{
    save(){
      this.$refs['stock'].validate((valid) => {
        if (valid) {
        } else {
          alert('请输入合法的数据！');
          return false;
        }
      });
      this.$http({
        url: this.$http.adornUrl('/product/stock/addStock'),
        method: 'post',
        data: this.stock
      }).then(({data})=>{
        if (data && data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.stock = {}
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
  created() {
    this.stock={
      warehouseId: '',
      goodsId: '',
      num: '',
      supplier: '',
      tel: '',
      price: '',
    }
    this.$http({
      url: this.$http.adornUrl(`/product/warehouse/findAll`),
      method: 'get'
    }).then(({data}) => {
      this.warehouseList = data.warehouseList
      this.goodsList = data.goodsList
    })

    if(this.$route.query.id){
      const id = this.$route.query.id
      this.stock.warehouseId = parseInt(id)
      this.seDisabled = true
    }else{
      this.stock = {}
    }
  }

}
</script>

<style scoped>

</style>
